<template>
  <div class="pull-chheight wel-contailer">
    <!-- <div class="banner-text">
      <h2>{{website.wel.title}}</h2>
      <span :class="['actor',{typeing:isText}]">{{text}}</span>
    </div>-->
    <div class="basic-container carpadding">
      <div class="el-card is-always-shadow">
        <h4>服务器</h4>
        <avue-data-display :option="option"></avue-data-display>
      </div>
    </div>

    <div class="basic-container carpadding">
      <div class="el-card is-always-shadow">
        <h4>展示例子</h4>
        <avue-data-tabs :option="option3"></avue-data-tabs>
      </div>
    </div>

    <div class="basic-container carpadding">
      <div class="el-card is-always-shadow" :style="{padding: '8px 10px 8px 10px'}">
        <div id="myChart" :style="{width: '500px', height: '300px', float: 'left'}"></div>
        <div id="pieChart" :style="{width: '500px', height: '300px',float: 'left'}"></div>
        <div id="hadoopChart" :style="{width: '500px', height: '300px',float: 'left'}"></div>
      </div>
    </div>

    <div class="basic-container carpadding">
      <div class="el-card is-always-shadow">
        <h4>其他展示</h4>
        <avue-data-box :option="option1"></avue-data-box>
      </div>
    </div>

    <div class="basic-container carpadding">
      <div class="el-card is-always-shadow">
        <h4>图片展示</h4>
        <avue-data-card :option="option2"></avue-data-card>
      </div>
    </div>

    <!--  <div id='myChart':style="{width: '500px', height: '300px',float:'left'}"></div>
    <div id='myChart1':style="{width: '500px', height: '300px',float:'left'}"></div>
    <div id='myChart2':style="{width: '500px', height: '300px',float:'left'}"></div>
    <div id='myChart3':style="{width: '500px', height: '300px',float:'left'}"></div>-->
    <!-- <div id="applicationChart" :style="{width: '500px', height: '300px',float: 'left'}"></div>
    <div id="monitorChart" :style="{width: '500px', height: '300px',float: 'left'}"></div>-->
  </div>
</template>

<script>
// 引入echarts
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
import { mapGetters } from "vuex";
export default {
  name: "wel",
  data() {
    return {
      DATA: [],
      text: "",
      actor: "",
      count: 0,
      isText: false,
      form: {},
      option: {
        data: [
          {
            count: 4,
            title: "服务器数量",
            //href:'https://avue.top',
            target: "_blank"
          },
          {
            count: "300T",
            title: "物理内存",
            //href:'https://avue.top',
            target: "_blank"
          },
          {
            count: "100G",
            title: "运行内存",
            //href:'https://avue.top',
            target: "_blank"
          }
        ]
      },
      option1: {
        data: [
          {
            title: "错误日志",
            count: 12332,
            icon: "icon-cuowu",
            color: "rgb(49, 180, 141)",
            href: "https://avue.top",
            target: "_blank"
          },
          {
            title: "数据展示",
            count: 33,
            icon: "icon-shujuzhanshi2",
            color: "rgb(56, 161, 242)",
            href: "https://avue.top",
            target: "_blank"
          },
          {
            title: "权限管理",
            count: 2223,
            icon: "icon-jiaoseguanli",
            color: "rgb(117, 56, 199)",
            href: "https://avue.top",
            target: "_blank"
          }
        ]
      },
      option2: {
        data: [
          {
            name: "图片1",
            src: "/static/cdn/images/dgzhsq.jpg",
            text: "介绍1",
            href: "https://avue.top",
            target: "_blank"
          },
          {
            name: "图片2",
            src: "/static/cdn/images/dgzhsq.jpg",
            text: "介绍2",
            href: "https://avue.top",
            target: "_blank"
          },
          {
            name: "图片3",
            src: "/static/cdn/images/role.gif",
            text: "介绍3",
            href: "https://avue.top",
            target: "_blank"
          },
          {
            name: "图片4",
            src: "/static/cdn/images/title.gif",
            text: "介绍",
            href: "https://avue.top",
            target: "_blank"
          }
        ]
      },
      option3: {
        data: [
          {
            title: "统计例子1",
            subtitle: "实时",
            count: 7993,
            allcount: 10222,
            text: "总记录数",
            color: "rgb(27, 201, 142)",
            key: "个",
            href: "https://avue.top",
            target: "_blank"
          },
          {
            title: "统计例子2",
            subtitle: "实时",
            count: 3112,
            allcount: 10222,
            text: "总记录数",
            color: "rgb(230, 71, 88)",
            key: "个",
            href: "https://avue.top",
            target: "_blank"
          },
          {
            title: "统计例子3",
            subtitle: "实时",
            count: 908,
            allcount: 10222,
            text: "总记录数",
            color: "rgb(178, 159, 255)",
            key: "个",
            href: "https://avue.top",
            target: "_blank"
          }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["website"])
  },
  created() {
    this.DATA = this.website.wel.list;
    this.actor = this.DATA[this.count] || "";
    setTimeout(() => {
      this.isText = true;
      this.setData();
    }, 2000);
  },
  mounted() {
    /* this.drawLine(); */
    this.drawLine();
    this.drawPie();
    this.hadoopChart();
    //this.serverControl();
    this.application();
    this.monitor();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "ESB服务",
          x: "center"
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["服务注册", "服务发现", "服务商店"]
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            data: [30, 40, 50],
            barWidth: "50%",
            top: 30,
            bottom: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 7, //圆角
                // 定制显示（按顺序）
                color: function(params) {
                  var colorList = [
                    "#C33531",
                    "#EFE42A",
                    "#64BD3D",
                    "#EE9201",
                    "#29AAE3",
                    "#B74AE5",
                    "#0AAF9F",
                    "#E89589",
                    "#16A085",
                    "#4A235A",
                    "#C39BD3 ",
                    "#F9E79F",
                    "#BA4A00",
                    "#ECF0F1",
                    "#616A6B",
                    "#EAF2F8",
                    "#4A235A",
                    "#3498DB"
                  ];
                  return colorList[params.dataIndex];
                },
                label: {
                  show: true, //开启显示
                  position: "top" //在上方显示
                }
              }
            }
          }
        ]
      });
    },
    drawPie() {
      let myChart = echarts.init(document.getElementById("pieChart"));

      myChart.setOption({
        title: {
          text: "服务器",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          data: ["Docker", "Jenkins", "私有云服务器", "vSphere Client"]
          //selected: data.selected
        },
        series: [
          {
            name: "数量",
            type: "pie",
            radius: "65%",
            center: ["40%", "50%"],
            data: [
              { value: 335, name: "Docker" },
              { value: 310, name: "Jenkins" },
              { value: 135, name: "私有云服务器" },
              { value: 234, name: "vSphere Client" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    //hadoop
    hadoopChart() {
      let dom = document.getElementById("hadoopChart");
      let myChart = echarts.init(dom);

      myChart.setOption({
        title: {
          text: "Hadoop",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove"
        },
        series: [
          {
            type: "tree",

            data: [
              {
                name: "Hadoop节点",
                children: [
                  {
                    name: "主节点",
                    children: [
                      {
                        name: "1",
                        value: 2105,
                        children: []
                      },
                      {
                        name: "2",
                        value: 2105,
                        children: []
                      },
                      {
                        name: "3",
                        value: 2105
                      }
                    ]
                  },
                  {
                    name: "备用节点",
                    children: [
                      {
                        name: "1",
                        value: 2105
                      }
                    ]
                  }
                ]
              }
            ],
            top: "1%",
            left: "20%",
            bottom: "1%",
            right: "10%",
            symbolSize: 17,

            label: {
              normal: {
                position: "left",
                verticalAlign: "middle",
                align: "right",
                fontSize: 13
              }
            },

            leaves: {
              label: {
                normal: {
                  position: "right",
                  verticalAlign: "middle",
                  align: "left"
                }
              }
            },

            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      });
    },
    serverControl() {
      let dom = document.getElementById("serverChart");
      let myChart = echarts.init(dom);

      myChart.setOption({
        title: {
          text: "微服务",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove"
        },
        series: [
          {
            type: "tree",

            data: [
              {
                name: "注册中心",
                children: [
                  {
                    name: "认证中心"
                  },
                  {
                    name: "配置中心"
                  },
                  {
                    name: "网关"
                  },
                  {
                    name: "系统管理服务"
                  }
                ]
              }
            ],
            top: "1%",
            left: "20%",
            bottom: "1%",
            right: "25%",
            symbolSize: 17,

            label: {
              normal: {
                position: "left",
                verticalAlign: "middle",
                align: "right",
                fontSize: 13
              }
            },

            leaves: {
              label: {
                normal: {
                  position: "right",
                  verticalAlign: "middle",
                  align: "left"
                }
              }
            },

            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      });
    },
    application() {
      let dom = document.getElementById("applicationChart");
      let myChart = echarts.init(dom);

      myChart.setOption({
        title: {
          text: "微服务应用",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove"
        },
        series: [
          {
            type: "tree",

            data: [
              {
                name: "应用",
                children: [
                  {
                    name: "云人脸识别"
                  },
                  {
                    name: "黔西南风险感知平台"
                  },
                  {
                    name: "花果园信息展示大屏"
                  }
                ]
              }
            ],
            top: "20%",
            left: "10%",
            bottom: "15%",
            right: "10%",
            symbolSize: 17,
            symbol: "emptyCircle",

            orient: "vertical",

            expandAndCollapse: true,

            label: {
              normal: {
                position: "top",
                rotate: 0,
                verticalAlign: "middle",
                align: "center",
                fontSize: 13
              }
            },

            leaves: {
              label: {
                normal: {
                  position: "bottom",
                  rotate: -0,
                  verticalAlign: "middle",
                  align: "center"
                }
              }
            },

            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      });
    },
    getData() {
      if (this.count < this.DATA.length - 1) {
        this.count++;
      } else {
        this.count = 0;
      }
      this.isText = true;
      this.actor = this.DATA[this.count];
    },
    setData() {
      let num = 0;
      let count = 0;
      let active = false;
      let timeoutstart = 5000;
      let timeoutend = 1000;
      let timespeed = 10;
      setInterval(() => {
        if (this.isText) {
          if (count == this.actor.length) {
            active = true;
          } else {
            active = false;
          }
          if (active) {
            num--;
            this.text = this.actor.substr(0, num);
            if (num == 0) {
              this.isText = false;
              setTimeout(() => {
                count = 0;
                this.getData();
              }, timeoutend);
            }
          } else {
            num++;
            this.text = this.actor.substr(0, num);
            if (num == this.actor.length) {
              this.isText = false;
              setTimeout(() => {
                this.isText = true;
                count = this.actor.length;
              }, timeoutstart);
            }
          }
        }
      }, timespeed);
    }
  }
};
</script>

<style scoped="scoped" lang="scss">
.carpadding {
  padding: 8px 10px 8px 10px;
}

.wel-contailer {
  position: relative;
}
.banner-text {
  position: relative;
  padding: 0 20px;
  font-size: 20px;
  text-align: center;
  color: #333;
}
.banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  display: none;
}
.actor {
  height: 250px;
  overflow: hidden;
  font-size: 18px;
  color: #333;
}

.actor:after {
  content: "";
  width: 3px;
  height: 25px;
  vertical-align: -5px;
  margin-left: 5px;
  background-color: #333;
  display: inline-block;
  animation: blink 0.4s infinite alternate;
}

.typeing:after {
  animation: none;
}

@keyframes blink {
  to {
    opacity: 0;
  }
}
</style>
